<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js"></script>
		<script src="myjs/jqoperater.js"></script>
		<script src="myjs/bindevent.js"></script>
		<style>
			#div1,
			#div2,
			#div3 {
				width: 6.25rem;
				height: 3.125rem;
				margin-bottom: 0.625rem;
				margin-right: 0.625rem;
				float: left;
			}

			footer {
				float: bottom;
			}
		</style>
	</head>
	<body>
		<p>被隐藏</p>
		<p>也被隐藏</p>
		<div style="height:3.75rem;">
			<div id="div1" style="background-color: aqua;"></div>
			<div id="div2" style="background-color: chartreuse;"></div>
			<div id="div3" style="background-color: darkmagenta;"></div>
		</div>

		<div id="animdiv" style="width: 12.5rem;height: 6.25rem;background-color: crimson;position: relative;"></div>

		<div>
			<button id="btnHide">隐藏文件</button>
			<button id="btnShow">显示文件</button>
			<br />
			<button id="btnFadeIn">淡入</button>
			<button id="btnFadeOut">淡出</button>
			<br />
			<button id="btnToggle">切换</button>
			<br />
			<button id="btnAnim">自定义动画</button>
			<br />
			<button id="btnChain">链式调用</button>
			<br />
			<button id="btnBind">绑定事件</button>

		</div>
	</body>
</html>
